@()(implicit request: RequestHeader)
	@user.main("差异分析（Biosigner）")("biosigner") {
		<div class="page-content">

			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa-binoculars"></i>
						<a href="#">差异分析（Biosigner）</a>
					</li>
				</ul>
			</div>


			<div class="row-fluid">

				<div class="row">
					<div class="col-md-12 col-sm-12">
						<div class="portlet green-jungle box">
							<div class="portlet-title">
								<div class="caption">
									设置参数
								</div>
							</div>

							<div class="portlet-body">

								<form class="registration-form form-horizontal" id="form"
								accept-charset="UTF-8" method="post">

									<input name="method" id="method" type="hidden" value="tTest">

									<div class="form-group">
										<label class="control-label col-sm-2">分组策略
											<a href="@routes.MetaboliteController.groupBefore()" target="_blank"><i style="color: black" class="fa fa-eye"></i></a>
											:</label>
										<div class="col-sm-3">
											<select class="form-control group" name="groupName" id="groupName">

											</select>
										</div>
									</div>

									<div class="form-group">
										<label class="control-label col-sm-2">分类器算法:</label>
										<div class="col-sm-3">
											<select class="form-control" name="methodC" required="required" style="border-radius: 4px;">
												<option value="all" selected="true">all</option>
												<option value="plsda">PLS-DA</option>
												<option value="randomforest">Random Forest</option>
												<option value="svm">SVM</option>
											</select>
										</div>

										<label class="control-label col-sm-2">
											bootstraps次数<span id="question4" style="margin-bottom: 5px">
											<a type="button" title="说明" data-container="body" data-toggle="popover"
											data-placement="right" data-content="Number of bootstraps for resampling."
											data-trigger="hover"><i class="fa fa-question-circle-o"></i></a>
										</span>:</label>
										<div class="col-sm-3">
											<input class="form-control" value="1" name="bootI">
										</div>

									</div>

									<div class="form-group">
										<label class="control-label col-sm-2">
											Selection tier(s)<span id="question4" style="margin-bottom: 5px">
											<a type="button" title="说明" data-container="body" data-toggle="popover"
											data-placement="right" data-content="features with tier 'S' have been found significant in all backward selections; features with tier 'A' have been found significant in all but the last selection."
											data-trigger="hover"><i class="fa fa-question-circle-o"></i></a>
										</span>:</label>
										<div class="col-sm-3">
											<select class="form-control" name="tierC" required="required" style="border-radius: 4px;">
												<option value="S" selected="true">S</option>
												<option value="A">S+A</option>
											</select>
										</div>

										<label class="control-label col-sm-2">
											pvalN<span id="question4" style="margin-bottom: 5px">
											<a type="button" title="说明" data-container="body" data-toggle="popover"
											data-placement="right" data-content="To speed up the selection, only variables which
										significantly improve the model up to two times this threshold (to take into account potential fluctuations) are computed."
											data-trigger="hover"><i class="fa fa-question-circle-o"></i></a>
										</span>:</label>
										<div class="col-sm-3">
											<input class="form-control" value="0.05" name="pvalN">
										</div>

									</div>

									<div class="form-group">
										<div style="display: none">
											<label class="control-label col-sm-2" >随机种子:</label>
											<div class="col-sm-3">
												<input class="form-control" value="0" name="seedI">
											</div>
										</div>

										<label class="control-label col-sm-2">log2FC阈值:</label>
										<div class="col-sm-3">
											<input class="form-control" value="0" name="logCutoff">
										</div>

									</div>

									<div class="form-group">
										<div class="actions col-sm-offset-2 col-sm-2">
											<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="mySearch()">
												运行</button>
										</div>
									</div>


								</form>

							</div>
						</div>
					</div>
				</div>

				<div id="result" style="display: none">

					<div class="row">
						<div class="col-md-12 col-sm-12">
							<div class="portlet green-jungle box">
								<div class="portlet-title">
									<div class="caption">
										显著性结果
									</div>
									<div class="tools">
										<a href="javascript:;" class="collapse">
										</a>
									</div>
								</div>

								<div class="portlet-body" id="noCotent">暂无显著性结果！</div>
								<div class="portlet-body" style="display: none;" id="content">

									<label>显示的列:</label>
									<div id="checkbox" class="checkbox">

									</div>

									<div class="table-responsive" id="tableContent">
										<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
										data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
										data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all"
										>
											<thead>
												<th data-field='geneId' data-sortable='true' id="marker"
												data-formatter="diffMetaboliteIDFmt">代谢物</th>
											</thead>
										</table>

									</div>


									<div style="margin-top: 10px">
										<label>对差异代谢物进行:</label>
										<div class="row">

											<div class="col-sm-2">
												<form target="_blank" method="post" id="geneIdForm">
													<input type="hidden" id="geneIdStr" name="geneIdStr">
													<input type="hidden" id="log2FcStr" name="log2FcStr">
												</form>
												<button type="button" class="btn btn-primary" style="width: 90%;" onclick="keggEnrich()">
													KEGG富集分析</button>
											</div>

											<div class="col-sm-2">
												<button type="button" class="btn btn-primary" style="width: 90%;" onclick="heatmap()">
													热图分析</button>
											</div>

											<div class="col-sm-2">
												<button type="button" class="btn btn-primary" style="width: 90%;" onclick="expressPattern()">
													表达模式分析</button>
											</div>

											<div class="col-sm-2">
												<button type="button" class="btn btn-primary" style="width: 90%;" onclick="roc()">
													Roc分析</button>
											</div>

										</div>
									</div>

								</div>
								<div>

								</div>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-md-12 col-sm-12">
							<div class="portlet green-jungle box">
								<div class="portlet-title">
									<div class="caption">
										图片结果
									</div>
									<div class="tools">
										<a href="javascript:;" class="collapse">
										</a>
									</div>
								</div>

								<div class="portlet-body" id="noCotent">

									<div id="download" style="display: none;">
										<button type="button" class="btn btn-primary" id="deleteButton" onclick="downloadPdf()"
										style="margin-bottom: 10px">
											<i class="fa fa-download"></i>&nbsp;下载pdf格式图片
										</button>
									</div>

									<div id="charts" align="center">没有图片结果生成！</div>
								</div>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-md-12 col-sm-12">
							<div class="portlet green-jungle box">
								<div class="portlet-title">
									<div class="caption">
										引用
									</div>
								</div>
								<div class="portlet-body">
									<p class="paragraph">
										分析模块引用了<b>R语言biosigner包（v1.2.4）</b>中的biosign函数进行分析。
								<p class="paragraph">
									相关文献如下所示：
								</p>
									<p class="paragraph">
										Rinaudo P., Boudah S., Junot C. and Thevenot E.A. (2016). biosigner: a new method for the discovery of significant molecular signatures from omics data.Frontiers in Molecular Biosciences, 3.
									</p>

								</div>

							</div>
						</div>
					</div>
				</div>


			</div>

		</div>


		<script>
				var tierBase64 = ""
				var boxBase64 = ""
				var originalHtml = ""
				$(function () {

					originalHtml = $("#tableContent").html()
					$.ajax({
						url: "@routes.MetaboliteController.getAllGroupNum2Names()",

						type: "get",
						success: function (data) {
							$(".group").select2({
								data: data,
								minimumResultsForSearch: -1
							})
						}
					})

					bootstrapValidator()
				})

				function refreshContent(data) {
					var checkboxHtml = ""
					$.each(data.columnNames, function (i, v) {
						checkboxHtml += "<label style='margin-right: 15px'>" +
								"<input type='checkbox' checked='checked' value='" + v + "' onclick=\"setColumns('" + v + "')\">" + v +
								"</label>"
					})
					$("#checkbox").empty().append(checkboxHtml)
					var html = ""
					$.each(data.columnNames, function (i, v) {
						html += "<th data-field='" + v + "' data-sortable='true'>" + v + "</th>"
					})
					$("#tableContent").empty().append(originalHtml)
					$("#marker").after(html)
					$('#table').bootstrapTable({
						data: data.array,
						exportOptions: {
							csvSeparator: "\t"
						}
					});
					$.each(data.columnNames.slice(6), function (n, value) {
								$('#table').bootstrapTable('hideColumn', value);
								$("input:checkbox[value='" + value + "']").attr("checked", false)
							}
					);
				}

				function downloadPdf() {
					var zip = new JSZip()
					zip.file("figure_boxplot.pdf", boxBase64, {base64: true}).file("figure_tier.pdf", tierBase64, {base64: true})
					zip.generateAsync({type: "blob"}).then(function (content) {
						saveAs(content, "result.zip")
					})

				}

				function keggEnrich() {
					$("#geneIdForm").attr("action", "@routes.MetaboliteController.keggEnrichBefore1()")
					$("#geneIdForm").submit()
				}

				function heatmap() {
					$("#geneIdForm").attr("action", "@routes.MetaboliteController.heatmapBefore1()")
					$("#geneIdForm").submit()
				}

				function expressPattern() {
					$("#geneIdForm").attr("action", "@routes.MetaboliteController.expressPatternBefore1()")
					$("#geneIdForm").submit()
				}

				function roc() {
					$("#geneIdForm").attr("action", "@routes.MetaboliteController.rocBefore1()")
					$("#geneIdForm").submit()
				}

				function mySearch() {
					var form = $("#form")
					var fv = form.data("bootstrapValidator")
					fv.validate()
					if (fv.isValid()) {
						var element = "<div id='content'><span id='info'>" + zhRunning + "</span>&nbsp;<img class='runningImage' src='@routes.Assets.at("images/running2.gif")' style='width: 30px;height: 20px;'></div>"
						var index = layer.alert(element, {
							skin: 'layui-layer-molv'
							, closeBtn: 0,
							title: zhInfo,
							btn: []
						});
						$.ajax({
							url: "@routes.MetaboliteController.biosigner()",
							type: "post",
							data: $("#form").serialize(),

							success: function (data) {
								layer.close(index)
								if (data.valid == "false") {
									$("#download").hide()
									$("#noCotent").show()
									$("#content").hide()
									$("#charts").html("没有图片结果生成！")
									swal("Error", data.message, "error")
									$("#result").hide()
								} else {
									refreshContent(data)
									groupName = $("#groupName").val()
									$("#noCotent").hide()
									$("#content").show()
									$("#charts").html(data.base64)
									$("#download").show()
									tierBase64 = data.tierBase64
									boxBase64 = data.boxBase64
									$("#geneIdStr").val(data.geneIdStr)
									$("#log2FcStr").val(data.log2FcStr)
									$("#result").show()
								}
							}
						});

					}

				}

				function setColumns(value) {
					var element = $("input:checkbox[value='" + value + "']")
					if (element.is(":checked")) {
						$('#table').bootstrapTable('showColumn', value);
					} else {
						$('#table').bootstrapTable('hideColumn', value);
					}
				}

				function bootstrapValidator() {
					var infinityNumber = Number.MAX_VALUE
					$('#form').bootstrapValidator({
						framework: 'bootstrap',
						icon: {
							valid: 'glyphicon glyphicon-ok',
							invalid: 'glyphicon glyphicon-remove',
							validating: 'glyphicon glyphicon-refresh'
						},
						fields: {
							bootI: {
								validators: {
									notEmpty: {
										message: "自举数不能为空！"
									},
									integer: {
										message: "自举数必须为整数！"
									},
									between: {
										min: 1,
										max: infinityNumber,
										message: "自举数必须大于0！"
									}
								}
							},
							logCutoff: {
								validators: {
									notEmpty: {
										message: 'log2FC阈值不能为空！'
									},
									numeric: {
										message: "log2FC阈值必须为数字！"
									}
								}
							},
							seedI: {
								validators: {
									notEmpty: {
										message: "随机种子不能为空！"
									},
									integer: {
										message: "随机种子必须为整数！"
									},
								}
							},
							pvalN: {
								validators: {
									notEmpty: {
										message: 'p值阈值不能为空！'
									},
									numeric: {
										message: "p值阈值必须为数字！"
									},
									between: {
										min: "0",
										max: 1,
										message: "p值阈值必须在0到1之间！"
									}
								}
							},
							groupName: {
								validators: {
									callback: {
										message: '请至少选择一个分组策略！',
										callback: function (value, validator, $field) {
											var options = validator.getFieldElements('groupName').val();
											return (options != null);
										}
									}
								}
							},


						}
					});
				}

		</script>

	}